<template>
    <el-input v-model="state.phoneNumber" placeholder="请输入详细地址" >
        <template #prepend>
            <el-cascader
                :key="new Date()"
                ref="cascaderAddr"
                :options="options"
                :props="props"
                :style="{ width: inputwidth + 'px' }"
                v-model="chooseAddressList"
                :placeholder="defaultaddress"
                :collapse-tags="iscollapsetag"
                @change="visibleChange"
            ></el-cascader>
        </template>
    </el-input>
</template>

<script lang="ts">

import { defineComponent, reactive,computed } from 'vue';

/* 
  props参数：
           inputwidth:               输入框的宽度
           addresstype:              地址填写要求,4: 省市区街道四级必填，3：省市区三级必填，2：省市必填， 0:没有限制
           addresslevel:             请求接口的地址级别，PROVINCE：省份，CITY： 省市，DISTRICT：省市区，STREET：省市区街道
           currentaddresscode:       地址反填，传入当前地区的code，如：'安徽省安庆市大观区大观开发区' 要传入 '340803400000',
           isshowtitle:              是否显示提示信息,
           ismultiple:               是否可以多选,
           iscollapsetag:            多选的标签是否折叠,
           currentaddresscodelist:   多选时地址反填。如："安徽省/安庆市，安徽省/蚌埠市"，要传入['340800000000','340300000000']
  $emit事件：
           getaddressinfo       将所选地址信息传递到父组件
*/

export default defineComponent({
  props: {
    inputwidth: {
      type: Number,
      default: 260,
    },
    addresstype: {
      type: Number,
      default: 0,
    },
    addresslevel: {
      type: String,
      default: 'STREET',
    },
    isshowtitle: {
      type: Boolean,
      default: true,
    },
    currentaddresscode: {
      type: String,
      default: '',
    },
    currentaddresscodelist: {
      type: Array,
      default: [],
    },
    ismultiple: {
      type: Boolean,
      default: false,
    },
    iscollapsetag: {
      type: Boolean,
      default: false,
    },
  },
  setup(props: any) { 
    let state = reactive({
          phoneNumber: props.phoneNumber,
          country: props.country
      });
    const getTitle = () => {

    };
    const visibleChange = () => {

    };
    const handleChange = (value: any) => {

    };
    const init = () => {

    };
    const getLevelInfo = () => {

    };
    const getTreeDeepArr = (key:any, treeData:any) => {
      // let arr: any[] = [] // 在递归时操作的数组
      // let returnArr: any[] = [] // 存放结果的数组
      // let depth = 0 // 定义全局层级
      // // 定义递归函数
      // function childrenEach(childrenData: string|any[], depthN: number) {
      //   for (var j = 0; j < childrenData.length; j++) {
      //     depth = depthN // 将执行的层级赋值 到 全局层级
      //     arr[depthN] = childrenData[j].code
      //     if (childrenData[j].code == key) {
      //       returnArr = arr.slice(0, depthN + 1) //将目前匹配的数组，截断并保存到结果数组，
      //       break
      //     } else {
      //       if (childrenData[j].children) {
      //         depth++
      //         childrenEach(childrenData[j].children, depth)
      //       }
      //     }
      //   }
      //   return returnArr
      // }
      // return childrenEach(treeData, depth)
    }
    return {
      options: [],
      title: '',
      chooseAddressList: [],
      props: {},
      state,
    }
  }
    
})
</script>
<style>
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
.el-cascader .el-input .el-input__inner {
  height: 30px;
}
</style>